<template>
	<view class="u-page info-page">
		<view class="info-form">
			<u-form :model="info" ref="changeForm" label-width="100" :error-type="['border-bottom']">
				<view class="c-item">
					<u-form-item label="头像" prop="avatar">
						<u-avatar :src="info.avatar" mode="circle" size="large"></u-avatar>
						<button slot="right" class="cu-btn round bg-gradual-blue"  @click="getUserInfo">获取</button>
					</u-form-item>
				</view>
				<view class="c-item">
					<u-form-item label="手机号" prop="phone">
						<u-input v-model="info.phone" :disabled="true" placeholder="请绑定手机号码"/>
						<button slot="right" class="cu-btn round bg-gradual-blue" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取</button>
					</u-form-item>
				</view>
				<view class="c-item">
					<u-form-item label="邮箱" prop="email">
						<u-input v-model="info.email" placeholder="请输入合法邮箱"/>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="up_button">
			<button class="cu-btn round bg-gradual-blue"  @click="submit">更新</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:{
					avatar:'',
					phone:'',
					email:''
				},
				rules: {
					email:[{
						required: false,
						trigger: 'blur',
						type:'email'
					}]
				}
			}
		},
		onReady() {
			this.info.avatar=this.jcs_user.avatar;
			this.info.phone=this.jcs_user.phone;
			this.info.email=this.jcs_user.email;
			this.$refs.changeForm.setRules(this.rules);
		},
		methods:{
			getPhoneNumber(res){
				let that = this;
				uni.login({
					provider: 'weixin',
					success: (loginSuccess) => {
						let code = loginSuccess.code;
						if(res.detail.encryptedData){
							that.$H.post("/homeapi/decryptMobile",{code:code,encryptedData:res.detail.encryptedData,iv:res.detail.iv},{}).then(res=>{
								this.info.phone = res.data.mobile;
							}).catch(err=>{
								uni.showToast({
									title: '请稍后重试获取',
									icon:'none',
									duration: 2000
								});
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请稍后重试获取',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			getUserInfo(){
				uni.getUserProfile({
					desc:'获取头像',
					success:(info)=>{
						this.info.avatar=info.userInfo.avatarUrl;
					},
					error:(err)=>{
						uni.hideLoading();
						uni.showToast({
						    title: '请稍后重试获取',
							icon:'none',
						    duration: 2000
						});
					}
				})
			},
			submit(){
				if(this.info.email.trim()!==''){
					this.$refs.changeForm.validate(valid => {
						if (valid) {
							this.update();
						} else {
							uni.hideLoading();
							uni.showToast({
							    title: '邮箱格式不正确',
								icon:'none',
							    duration: 2000
							});
						}
					});
				}else{
					this.update();
				}
			},
			update(){
				let data = {avatar:this.info.avatar,mobile:this.info.phone,email:this.info.email}
				this.$H.post("/homeapi/appletsProfile",data,{}).then(res=>{
					let userinfo = res.data.userinfo
					this.$u.vuex('jcs_token', userinfo.token)
					let user = {avatar: userinfo.avatar,phone: userinfo.mobile,email: userinfo.email}
					this.$u.vuex('jcs_user', user)
					uni.showToast({
						title: '更新成功',
						duration: 2000
					});
				}).catch(err=>{
					uni.showToast({
						title: '更新失败，稍后重试',
						icon:'none',
						duration: 2000
					});
				})
			}
		}
	}
</script>

<style>
	.info-page{
		height: 100vh;
		background-color: #FFFFFF;
	}
	.info-form{
		padding: 30rpx;
	}
	.up_button{
		position: absolute;
		bottom: 0px;
		width: 100%;
		padding: 20rpx;
	}
	.up_button button{
		width: 100%;
	}
</style>
